<template>
	<view class="fadeInAnimated newsPage">
		<template v-if="list.length > 0">
			<block v-for="(item,index) in list" :key="index">
				<new-list :item="item" :index="index" />
			</block>
		</template>
		<template v-else>
			<nothing />
		</template>

		<!-- 弹出层 -->
		<uni-popup ref="popup" type="top" @change="changePopup">
			<view hover-start-time=15 hover-stay-time=200 hover-class="bgcolor" class="sousuo" @tap="sousuoEvent"><text class="iconfont icon-sousuo"></text>添加好友</view>
			<view hover-start-time=15 hover-stay-time=200 hover-class="bgcolor" class="shanchu" @tap="shanchuEvent"><text class="iconfont icon-shanchu"></text>清除列表</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniBadge from "@/components/uni-badge/uni-badge";
	import newList from "@/components/news/new-list.vue";
	import nothing from "@/components/common/nothing.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniBadge,
			newList,
			nothing,
			uniPopup
		},
		onLoad() {
			this.getDate();
		},
		onHide() {
			// 跳转页面之前先让底部tab显示
			uni.showTabBar();
		},
		data() {
			return {
				list: [],
			};
		},
		methods: {
			async getDate() {
				this.list = [{
					img: "https://picsum.photos/100/100?random=1",
					nickname: "靓仔",
					time: "下午 18:00",
					content: "好难了吧，不知大了哈啊哈",
					number: 12
				}, {
					img: "https://picsum.photos/100/100?random=3",
					nickname: "靓仔",
					time: "下午 18:00",
					content: "看着办了",
					number: 199
				}, {
					img: "https://picsum.photos/100/100?random=2",
					nickname: "大人饿了",
					time: "下午 18:00",
					content: "町内你公公町内你公公町内你公公町内你公公町内你公公町内你公公",
					number: 18
				}];
			},
			async refresh() {
				setTimeout(() => {
					this.list = [...this.list, ...this.list];
					// 停止下拉刷新
					uni.stopPullDownRefresh();
				}, 2 * 1000);
			},
			// 弹出层的事件
			sousuoEvent() {
				// 清除完后，关闭弹出层
				this.$refs.popup.close();
				// 跳转到搜索的页面
				uni.navigateTo({
					url: `../../search/search?type=news`
				});
			},
			shanchuEvent() {
				// 清除完后，关闭弹出层
				this.$refs.popup.close();
			},
			changePopup(e) {
				if (e.show) {
					// 隐藏底部按钮
					uni.hideTabBar();
				} else {
					uni.showTabBar();
				}
			}
		},
		// 监听下拉刷新
		onPullDownRefresh() {
			this.refresh();
		},
		// 监听原生导航栏的按钮事件
		onNavigationBarButtonTap(e) {
			switch (e.index) {
				case 0: //左边
					this.$refs.popup.close();
					uni.navigateTo({
						url: "../../friendslist/friendslist"
					});
					break;
				case 1: //右边
					this.$refs.popup.open();
					break;
				default:
					console.log(`什么都没做了`);
					break;
			};
		},
	}
</script>

<style lang="scss">
	// 弹出层
	.sousuo,
	.shanchu {
		width: 100vw;
		background-color: #FFFFFF;
		padding: 30rpx 0rpx;
		@include flexCenterCenter;

		>text {
			margin-right: 20rpx;
		}
	}

	.sousuo {
		border-bottom: 2rpx solid #D7D7D7;
	}

	.shanchu {
		border-radius: 0rpx 0rpx 20rpx 20rpx;

		>text {
			color: #D81E06;
		}
	}

	/* 给页面添加淡入的动画效果 */
	.fadeInAnimated {
		animation: fadeInDown;
		animation-duration: 0.3s;
	}
</style>
